import Vue from 'vue'
import Vuex from 'vuex'

//引入登录的方法
import {getSingSwpier} from "../views/My.vue"
// import { getPhoneLogin} from "../request/api/home"

Vue.use(Vuex)


//引入工具
import { utils } from "../utils/utils";

import { getMusicLyric } from '@/request/api/item';
export default new Vuex.Store({
  //类似组件的data数据 管理组件的公共数据的 重要
  // 组件需要另一个页面使用计算机属性引用vuex的state和getters时
  // 可以在另一个页面里面的 导入 computed:{
      // 方法名(){ return this.$store.getters.公共的数据的名称}
  // }
  state: {
    
    //播放列表
    playList:[{
     al:{
      name: "There For You",
      id: 35554106,name: "There For You",
      pic: 109951165981772290,picUrl: "https://p2.music.126.net/FBTWTOCJqIzwGkFyvfLAIw==/109951165981772293.jpg",pic_str: "109951165981772293"
      // id: 80989536,name: "子不语·罗刹鸟",pic: 109951164306042060,picUrl: "https://p2.music.126.net/KxRt-yqd1niBvcYoxwHLoQ==/109951164306042063.jpg",pic_str: "109951164306042063"
    },
    //外面的音乐的id 用来播放的
    id: 480426313,
    ar:[{
      name:"Martin Garrix Troye Sivan"
    }]
    }],
    //播放列表的下标 上下首就改这里
    playListIndex:0,

    //播放与暂停按钮 在mutations下面改
    isbtnShow:true,
    detailShow:false, //点击跳转歌曲详情页 播放页
   
    //歌词部分 可以在下面的mutations里面改它
    lyricList:{},


    //记住当前时间
    currentTime:0,
    //歌曲总时长
    duration:0,
    //判断是否进行登录
    isLogin:false,
    //是否显示底部组件
    
    



        //音频节点,以便在不同页面使用(调用音频播放的方法,暂停音频方法,获取音频总时间,音频播放事件,...)
         $audio:null,
        //setAudio完成后 其他页面可以通过ccomputed来引用了
        
        //控制控制条的位置bottom
        isMain: true,

        //控制播放页面的显示和隐藏
        isShowPlayPage: false,
        isshowe:false,
        //当前音频信息
    currentAudioInfo: {
      //音频id
      audioId: '',

      //音频的歌手名称
      singerName: '',

      //音频名称
      songName: '',

      //音频的歌手图片
      singerPic: ''
    },

    //音频播放状态
    isPlay: false,

    //音频总时长
    duration: 0,

    //音频当前播放时长
    currentTime: 0,

    //进度条的宽度
    progressWidth: 0,

    //是否拖动进度条
    isDragProgress: false,

    //当前音频的歌词
    currentLyric: [],

    //歌词盒子移动的top
    top: 0,

    //歌词初始top(辅助计算top的值)
    initTop: 0,

    //歌词高亮的下标
    songLycActiveIndex: 0,

    //当前音频的每一行歌词的高度
    lyricHeight: [],

    //修改进度时控制不要触发oncanplay事件
    isChange: false

      },
  //类似组件的计算属性 也就是如同computed 可用来过滤state 过滤数据
  getters: {
     //格式化音频总时长
    formatDuration(state) {

      return utils.formatSeconds(state.duration);
    },

    //格式化音频当前播放时长
    formatCurrentTime(state) {
      return utils.formatSeconds(state.currentTime);
    }

  },
  //类似组件的methods方法,用于修改state数据 更改数据的时候在这里更改 而不用state直接修改 方便追踪数据变化 以及调试数据变化
  // 更改state的时候提交一个mutations 改数据的时候不直接里面的 
  // 可以在vue文件里写一个methods:{ 方法名(){this.$store.commit( "名字",{参数如 name:"水",price:51}  ) } } 
  // 想要添加到原来state里面的数据的时候也就是追加数据时 在mutations里面   方法名字(state,pro){ state.product.push(pro)  } (pro是上面添加的水 是个对象) 
  //  重要 完成更改数据或调试
  mutations: {

   //修改播放按钮
  //  updateIsbtnShow:function (state,value) { 
  //     state.isbtnShow = value  
  //   },

    updateIsbtnShow:function(state,value){
      state.isbtnShow = value
    },
    updatePlayList(state,value){
      state.playList = value
      console.log("updatePlayList方法 state.playList===>", state.playList);
    },
    updatePlayListIndex(state,value){
      state.playListIndex = value
    },
    
    updateDetailShow:function(state){
       //取反
       state.detailShow = !state.detailShow
    },
    //底部组件有歌曲就要获取歌词
    gettheLyricone:function(state,value){
      state.lyricList = value
      console.log("歌词传到全局==>",state.lyricList);
    },
    gettheLyric:async function(context,value){
      let res = await mygetLyric(value)
      console.log("获取歌词的方法==>",res);
    },
    //改歌词
    

    //改时间
    updateCurrentTime:function(state,value){
      state.currentTime = value
      // console.log( "时间的对比==>",  state.currentTime);
    },
    updateDuration:function(state,value){
      state.duration = value
    },

    //搜索的歌曲点击播放
    pushPlayList:function (state,value) { 
      state.playList.push(value)
     },

     Isback:function () { 
      
      
      },








    // 修改上面audio里面的null时在这里修改

    //设置一下音频节点
    setAudio(state,audioElement){
      //这里传好公共的 audioElement是参数
      state.$audio = audioElement;
    },

    //修改showPlayPage
    setIsShowPlayPage(state, isShow) {
      state.isShowPlayPage = isShow;
    },

    //修改isMain
    setIsMain(state, value) {
      state.isMain = value;
    },

     //修改音频id, 音频的歌手名称, 音频名称, 音频的歌手图片
     setAudioId(state, data) {
      // console.log('vuex data ==> ', data);
      for (let key in data) {
        state.currentAudioInfo[key] = data[key];
      }
      
    },

    //修改音频播放状态
    setAudioPlayStatus(state, status) {
      state.isPlay = status;
    },

    //修改音频总时长
    setDuration(state, value) {
      state.duration = value;
    },

    //修改音频当前时长
    setCurrentTime(state, value) {
      // console.log('修改音频当前时长 value ==> ', value);
      state.currentTime = value;
    },

    //修改进度条的宽度
    setProgressWidth(state, width) {
      // console.log('width ==> ', width);
      state.progressWidth = width;
    },

    //修改是否一移动进度条
    setIsDragProgress(state, isDrag) {
      state.isDragProgress = isDrag;
    },

    //修改歌词
    setCurrentLyric(state, lyric) {
      // console.log('lyric ==> ', lyric);
      state.currentLyric = lyric;
    },

    //修改歌词盒子移动的top
    setTop(state, top) {
      state.top = top;
    },

    //修改initTop
    setInitTop(state, top) {
      state.initTop = top;
    },

    //修改每一行歌词的高度数组
    setLyricHeight(state, heightData) {
      // console.log('vuex heightData ==> ', heightData);
      state.lyricHeight = heightData;
    },

    //修改高亮歌词的下标
    setSongLycActiveIndex(state, index) {
      state.songLycActiveIndex = index;
    },

    //修改isChange
    setIsChange(state, status) {
      state.isChange = status;
    }
  },
  //类似组件的methods方法,用于提交mutations,并且具有异步效果的,
  // 并且返回一个promise 用来提交mutations
  actions: {
    //获取歌词的一些方法
    getLyric:async function(context,value){
      let res = await getMusicLyric(value)
      console.log(res);
    },
    // getLogin:async function (context,value) { 
    //   let res = await getPhoneLogin(value);
    //   console.log("登录页面的rres==>>",res);
    //  }
  },
  //模块化() 比如页面多 组件多有某几个组件需要共用组件的时候 就可以把他抽象成一个模块来做
  //只有这些组件用到这些数据 其他用不到 单独开一个模块来管理这些数据(公共数据)每一个模块都包含上面的(state,getters,
  // mutations, actions) 新建一些组件放在 components .
  //如同路由不断嵌套 我们一般分一个模块就够了

  modules: {
  }
})
